<template>
  <!-- 16集4.50秒 -->
  <div class="person">
    姓：<input type="text" v-model="firstName" /> <br />
    名：<input type="text" v-model="lastName" /> <br />
    <button @click="changeFullName">将全名修改为li-si</button><br />
    全名：<span>{{ fullName }}</span> <br />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

let firstName = ref("zhang");
let lastName = ref("san");

let fullName = computed({
  get() {
    return (
      firstName.value.slice(0, 1).toUpperCase() +
      firstName.value.slice(1) +
      "-" +
      lastName.value
    );
  },
  set(val) {
    const [str1, str2] = val.split("-");
    firstName.value = str1;
    lastName.value = str2;
  },
});

function changeFullName() {
  fullName.value = "li-si";
}
</script>

<style>
.person {
  background-color: turquoise;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
